<template>
  <div class="loginpage">
    <div class="bg"></div>
    <div class="loginzone">
      <div class="loginbox">
        <el-form label-position="top" size="large" :model="userinfo" :rules="rules" ref="myForm">
          <el-form-item label="用户名" label-width="100px" prop="uname">
            <el-input placeholder="请填写你的用户名" clearable v-model="userinfo.uname">
              <template #prefix>
                <i class="iconfont icon-icon-test1"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" label-width="100px" prop="pwd">
            <el-input
              type="password"
              placeholder="不用我告诉你吧"
              v-model="userinfo.pwd"
              show-password
            >
              <template #prefix>
                <i class="iconfont icon-icon-test"></i>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item label="验证码" label-width="100px" prop="code">
            <el-row style="width: 400px">
              <el-col :span="16">
                <el-input placeholder="输入6位验证码" maxlength="6" v-model="userinfo.code">
                  <template #prefix>
                    <i class="iconfont icon-shouji"></i>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="7" :offset="1">
                <div class="code"></div>
              </el-col>
            </el-row>

            <el-button @click="handleLogin" type="primary" class="mt20">Go Go Go</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { useStore } from 'vuex';
import { reactive, ref, getCurrentInstance } from 'vue';
//  从 element 导入表单的类型 校验
import type { FormInstance, FormRules } from 'element-plus';
// 在组合式api当中实现 导航式编程
import { useRouter } from 'vue-router';
import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults';
import { showMsg } from '@/util/toast';
import { login } from '@/api/user';
import role from '@/api/role';
import menu from '@/router/menu';

const router = useRouter(); //  router 就等于 配置api当中的 this.$router

const store = useStore(); // 通过useStore可以得到一个 store对象=>配置api当中的this.$store
const { appContext } = getCurrentInstance(); // 获取当前的应用实例
const ctx = appContext.config.globalProperties; // 通过ctx可以调用所有在 实例的全局的方法
// console.log('appContext', appContext.config.globalProperties);

interface Userinfo {
  uname: string;
  pwd: string;
  code: string;
}
const userinfo = reactive<Userinfo>({
  uname: 'test123',
  pwd: '44123',
  code: '123456',
});

// 登录表单的检验规则
const rules = reactive<FormRules>({
  uname: [
    { required: true, message: '用户名必须填写', trigger: 'blur' },
    { min: 5, message: '用户名不能少于5个字符', trigger: 'blur' },
  ],
  pwd: [{ required: true, message: '密码必须填写', trigger: 'blur' }],
  code: [
    { required: true, message: '验证码必须填写', trigger: 'blur' },
    { len: 6, message: '验证码必须是6位', trigger: 'blur' },
  ],
});

// 创建一个ref对象 目的是为了让表单form组件 通过ref属性 来跟这个 ref对象绑定
//  以便在后期我使用 这个ref对象来得到对应的表单组件
const myForm = ref<FormInstance>();

const handleLogin = async () => {
  console.log('userinfo', userinfo);

  // 校验表单的方法1
  (myForm.value as FormInstance).validate(async (isValid, invalidFields) => {
    console.log('检验的结果是', isValid);
    console.log('没有通过检验的字段是', invalidFields);
    if (isValid) {
      const res = await login({
        uname: userinfo.uname,
        password: userinfo.pwd,
        strategy: 'local',
      });
      console.log('res', res);
      const { accessToken, user } = res;
      if (!accessToken) return showMsg('登录失败请重新再试');

      const roles = JSON.parse(user.roles);

      const tempaths: Array<any> = roles.map((item: any) => item.path);
      // 去重
      // eslint-disable-next-line
      interface RoleData {
        path?: string;
        [key: string]: any;
      }
      const visist = roles.map((item: RoleData) => {
        const nowmenu = menu.find((m) => m.url === item.path);
        return nowmenu;
      });

      console.log('visist', visist);
      store.commit('setMenu', visist);
      // if (userinfo.uname === 'admin') {
      //   store.commit('setMenu', [
      //     {
      //       name: '首页',
      //       url: '/index',
      //     },
      //     {
      //       name: '学员管理',
      //       url: '/stu',
      //     },
      //     {
      //       name: '公司管理',
      //       url: '/company',
      //     },
      //     {
      //       name: '题库管理',
      //       url: '/qa',
      //     },
      //   ]);
      // } else {
      //   store.commit('setMenu', [
      //     {
      //       name: '首页',
      //       url: '/index',
      //     },
      //     {
      //       name: '学员管理',
      //       url: '/stu',
      //     },
      //   ]);
      // }
      window.localStorage.setItem('accessToken', accessToken); // 记录登录用户信息
      router.replace({
        name: 'index',
        query: {
          // query(search)的参数会拼接到url上
          user: userinfo.uname,
          a: 123,
        },
        params: {
          // 如果你是通过params参数来声明 那么记得你的路由配置当中的path 需要声明有动态参数
          // path: 'index/:id/:c'
          c: 1,
          id: 456,
        },
      }); //  to 对象可以囊括写跳转的信息
    } else {
      showMsg('表单校验失败');
    }
  });
  return false;
};
</script>
<!--由于我们的 script setup没有地方书写 name的配置-->
<script lang="ts">
export default {
  name: 'loginPage', // 需要单独的去导出一个对象来声明 name属性
};
</script>
<style scoped lang="scss">
//  scoped的配置标识的是当前的样式尽在当前组件内有效 局部样式 避免组件同名污染
@media screen and (min-width: 900px) {
  .loginpage {
    width: 100vw;
    height: 100vh;
    display: flex;
    .bg {
      width: 50vw;
      background: blue;
    }
    .loginzone {
      width: 50vw;
      background: #fff;
      padding: 20px;
    }
  }
}

@media screen and (max-width: 900px) {
  .loginpage {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: blue;
    .bg {
      display: none;
    }
    .loginzone {
      width: 50vw;
      //height: 60vh;
      min-width: 495px;
      padding: 20px;
      background: #fff;
    }
  }
}
.loginzone {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginbox {
  width: 500px;
  height: 460px;
}
.code {
  height: 40px;
  border: 1px solid #000;
}
.mt20 {
  margin-top: 20px;
  width: 268px;
}
</style>
